<template>
  <div class="container">
    <div class="title1">合格率</div>
    <div class="title2">检测数量</div>
    <div id="exhartX" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { getJcxmByMarketATy, getJcxmLbByMarketATy } from "../../apis/home";
import { ref } from "vue";
const option1 = ref();
const getInit = () => {
  getJcxmByMarketATy().then((res) => {
    console.log(res);
    let yLabel = res.data.map((item) => item.name);
    let yData = res.data.map((item) => parseInt(item.bfb));
    let jcsumList = res.data.map((item) => item.jcsum);
    let bgData = [];
    for (let i in yData) {
      bgData.push(100);
    }
    let aaa = yData.map((item, index) => {
      return (
        ((item / 100) * 100).toFixed(0) +
        "%" +
        "        " +
        `${jcsumList[index]}`
      );
    });
    option1.value = {
      title: {
        text: "检测项目",
        textStyle: {
          color: "#0FFFFF",
          fontSize: 13,
          // fontWeight:'none'
        },
        top: "8",
      },
      grid: {
        left: "2%",
        right: "5%",
        bottom: "2%",
        top: "15%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none",
        },
        formatter: function (params) {
          return (
            params[0].name +
            "<br/>" +
            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
            params[0].seriesName +
            " : " +
            params[0].value +
            "%" +
            " <br/>"
          );
        },
      },
      xAxis: {
        show: false,
        type: "value",
      },
      dataZoom: [
        //滑动条
        {
          yAxisIndex: 0, //这里是从X轴的0刻度开始
          show: false, //是否显示滑动条，不影响使用
          type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          startValue: 0, // 从头开始。
          endValue: 5, // 一次性展示6个。
        },
      ],
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLabel: {
            show: true,
            margin: 15,
            textStyle: {
              color: "#2a82fd",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: yLabel,
        },
        {
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: false,
          axisLabel: {
            textStyle: {
              color: "#1AED83",
              fontSize: "13",
            },
          },
          data: yData.map((item, index) => {
            return (
              ((item / 100) * 100).toFixed(0) +
              "%" +
              "        " +
              `${jcsumList[index]}`
            );
          }),
        },
      ],
      series: [
        {
          name: "合格率",
          type: "bar",
          zlevel: 1,
          itemStyle: {
            //new echarts.graphic.LinearGradient(右,下,左,上,渐变值)
            //彩色渐变
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              { offset: 0, color: "#04c7ff" },
              { offset: 0.5, color: "#f8ff43" },
              { offset: 1, color: "#04c7ff" },
            ]),
            //底部透明渐变
            // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            //     { offset: 0, color: 'rgba(7,25,41,0)' },
            //     { offset: 0.5, color: 'rgba(8,229,255,0.8)' },
            //     { offset: 1, color: '#00cafc' },
            // ]),
          },
          barWidth: 16,
          data: yData,
        },
        {
          name: "背景",
          type: "bar",
          barWidth: 16,
          barGap: "-100%",
          data: bgData,
          itemStyle: {
            normal: {
              color: "#091B49",
              borderWidth: 1,
              borderColor: "#00ffff",
            },
          },
          label: {
            show: true,
            position: "right",
            color: "#fff",
            valueAnimation: true,
            formatter: function (params) {
              return aaa[params.dataIndex];
            },
          },
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("exhartX"), null, {
      devicePixelRatio: 2.5,
    });
    myChart.setOption(option1.value);
    //通过定时器的方式刷新，改变statrValue，endValue
    setInterval(() => {
      // 每次向后滚动一个，最后一个从头开始。
      if (option1.value.dataZoom[0].endValue == jcsumList.length) {
        option1.value.dataZoom[0].endValue = 6;
        option1.value.dataZoom[0].startValue = 0;
      } else {
        option1.value.dataZoom[0].endValue =
          option1.value.dataZoom[0].endValue + 1;
        option1.value.dataZoom[0].startValue =
          option1.value.dataZoom[0].startValue + 1;
      }
      myChart.setOption(option1.value);
    }, 2000);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  });
};

getInit();
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  display: flex;
  position: relative;

  .title1 {
    position: absolute;
    font-size: 13px;
    right: 20%;
    top: 4%;
    color: #0fffff;
  }

  .title2 {
    font-size: 13px;
    right: 1%;
    top: 4%;
    position: absolute;
    color: #0fffff;
  }
}
</style>
